// UI模块 - 负责创建界面元素和样式
let btn, modal, uploadArea, recordsContainer;

export function createUI() {
  // 悬浮按钮
  btn = document.createElement('button');
  btn.id = 'pic-text-x-btn';
  btn.title = 'PicTextX - 图片文字识别';
  
  // 创建按钮图标
  const icon = document.createElement('img');
  icon.src = typeof chrome !== 'undefined' && chrome.runtime ? 
    chrome.runtime.getURL('images/pic_text_x.svg') : 
    new URL('../images/pic_text_x.svg', import.meta.url).href;
  icon.alt = 'PicTextX';
  icon.className = 'pic-text-x-icon';
  btn.appendChild(icon);
  
  document.body.appendChild(btn);

  // 弹窗
  modal = document.createElement('div');
  modal.id = 'pic-text-x-modal';
  modal.innerHTML = `
    <div class="modal-header">
      <span>PicTextX - 图片文字识别</span>
      <button class="modal-close">&times;</button>
    </div>
    <div class="upload-area">
      <img src="${typeof chrome !== 'undefined' && chrome.runtime ? chrome.runtime.getURL('images/photo-icon.svg') : new URL('../images/photo-icon.svg', import.meta.url).href}" alt="照片图标" class="upload-icon">
      <p class="file-name" style="visibility: hidden; height: 19px; margin: 0;"></p>
      <p class="hint-text">点击上传、拖拽图片或粘贴截图</p>
    </div>
    <div class="records"></div>
  `;
  document.body.appendChild(modal);

  uploadArea = modal.querySelector('.upload-area');
  recordsContainer = modal.querySelector('.records');
  
  return { btn, modal, uploadArea, recordsContainer };
}

export function getUIElements() {
  return { btn, modal, uploadArea, recordsContainer };
}